<div *ngIf="usage">
    <ng-container *ngIf="usage.pipelines.length > 0">
        <h3>{{ 'action_usage_pipelines_using' | translate }}</h3>
        <ul>
            <li *ngFor="let p of usage.pipelines">
                <a [routerLink]="['/project', p.project_key, 'pipeline', p.pipeline_name]">
                    {{p.project_name}} - {{p.pipeline_name}} - {{p.action_name}}
                </a>
                <i *ngIf="p.warning" class="warning" nz-icon nzType="warning" nzTheme="fill" nz-tooltip nzTooltipTitle="The pipeline will not be able to run this action because of missing group permission."></i>
            </li>
        </ul>
    </ng-container>
    <ng-container *ngIf="usage.actions.length > 0">
        <h3>{{ 'action_usage_actions_using' | translate }}</h3>
        <ul>
            <li *ngFor="let a of usage.actions">
                <a [routerLink]="['/settings/action', a.group_name, a.parent_action_name]">
                    {{a.group_name ? a.group_name+'/' : ''}}{{a.parent_action_name}}</a>
                <i *ngIf="a.warning" class="warning" nz-icon nzType="warning" nzTheme="fill" nz-tooltip nzTooltipTitle="The parent action will not be able to run this action because they are not in the same group."></i>
            </li>
        </ul>
    </ng-container>
    <ng-container *ngIf="usage.pipelines.length === 0 && usage.actions.length === 0">
        {{ 'action_usage_not_used' | translate }}
    </ng-container>
</div>
